<template>
  <AppLayout>
    <div :class="styles['analytics']">
      <div :class="styles['page-header']">
        <h1 :class="styles['page-title']">统计分析</h1>
        <div :class="styles['date-filter']">
          <select v-model="timeRange" :class="styles['filter-select']">
            <option value="7">最近7天</option>
            <option value="30">最近30天</option>
            <option value="90">最近90天</option>
            <option value="365">最近一年</option>
          </select>
        </div>
      </div>

      <div :class="styles['stats-grid']">
        <div :class="styles['stat-card']">
          <div :class="styles['stat-icon']">📊</div>
          <div :class="styles['stat-content']">
            <h3 :class="styles['stat-number']">{{ stats.totalExams }}</h3>
            <p :class="styles['stat-label']">总考试数</p>
            <span :class="[styles['stat-change'], styles['positive']]">+12%</span>
          </div>
        </div>
        <div :class="styles['stat-card']">
          <div :class="styles['stat-icon']">👥</div>
          <div :class="styles['stat-content']">
            <h3 :class="styles['stat-number']">{{ stats.totalUsers }}</h3>
            <p :class="styles['stat-label']">总用户数</p>
            <span :class="[styles['stat-change'], styles['positive']]">+8%</span>
          </div>
        </div>
        <div :class="styles['stat-card']">
          <div :class="styles['stat-icon']">📝</div>
          <div :class="styles['stat-content']">
            <h3 :class="styles['stat-number']">{{ stats.totalQuestions }}</h3>
            <p :class="styles['stat-label']">总题目数</p>
            <span :class="[styles['stat-change'], styles['positive']]">+15%</span>
          </div>
        </div>
        <div :class="styles['stat-card']">
          <div :class="styles['stat-icon']">🎯</div>
          <div :class="styles['stat-content']">
            <h3 :class="styles['stat-number']">{{ stats.avgScore }}%</h3>
            <p :class="styles['stat-label']">平均分</p>
            <span :class="[styles['stat-change'], styles['positive']]">+3%</span>
          </div>
        </div>
      </div>

      <div :class="styles['charts-section']">
        <div :class="styles['chart-card']">
          <h2 :class="styles['chart-title']">考试参与趋势</h2>
          <div :class="styles['chart-placeholder']">
            <p>图表区域 - 显示考试参与人数趋势</p>
          </div>
        </div>
        <div :class="styles['chart-card']">
          <h2 :class="styles['chart-title']">成绩分布</h2>
          <div :class="styles['chart-placeholder']">
            <p>图表区域 - 显示成绩分布情况</p>
          </div>
        </div>
      </div>

      <div :class="styles['recent-activity']">
        <h2 :class="styles['section-title']">最近活动</h2>
        <div :class="styles['activity-list']">
          <div v-for="activity in recentActivities" :key="activity.id" :class="styles['activity-item']">
            <div :class="styles['activity-icon']">{{ activity.icon }}</div>
            <div :class="styles['activity-content']">
              <p :class="styles['activity-text']">{{ activity.text }}</p>
              <span :class="styles['activity-time']">{{ formatTime(activity.time) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AppLayout from '@/components/layout/AppLayout.vue'
import styles from '@/styles/admin/analytics.module.css'

const timeRange = ref('30')
const stats = ref({
  totalExams: 0,
  totalUsers: 0,
  totalQuestions: 0,
  avgScore: 0
})

const recentActivities = ref([])

const formatTime = (time) => {
  return new Date(time).toLocaleString('zh-CN')
}

onMounted(async () => {
  // 模拟数据
  stats.value = {
    totalExams: 45,
    totalUsers: 1250,
    totalQuestions: 1200,
    avgScore: 78
  }

  recentActivities.value = [
    {
      id: 1,
      icon: '📝',
      text: '张老师创建了新考试"Java基础考试"',
      time: new Date(Date.now() - 1000 * 60 * 30)
    },
    {
      id: 2,
      icon: '👥',
      text: '新用户"李同学"注册了账号',
      time: new Date(Date.now() - 1000 * 60 * 60)
    },
    {
      id: 3,
      icon: '📊',
      text: '王老师完成了"数据库原理"考试评分',
      time: new Date(Date.now() - 1000 * 60 * 120)
    }
  ]
})
</script>